<template>
	<div id="school_list">
		<div class="title">
			菜单管理
		</div>
		<div class="condition">
			 <el-input placeholder="角色名称" v-model="param.keyWord" @keyup.enter.native="paramChange()" size="small" class="input input-with-select">
			    <el-button @click="paramChange()" slot="append" icon="el-icon-search"></el-button>
			 </el-input>
			 
			  <el-button @click="openAdd()" type="primary" class="button" size="small" icon="el-icon-plus">&nbsp;&nbsp;新增</el-button>
			
		</div>
		<div class="table-div">
			<table class="table" cellspacing="0">
				<thead>
					<tr class="tr-head">
						<td style="width: 1rem;">
							<el-checkbox v-model="checked"></el-checkbox>
						</td>
						<td style="width: 1rem;">序号</td>
						<td style="width: 2rem;">项目名称</td>
						<td style="width: 2rem;">权限名称</td>
						<td style="width: 4rem;">权限描述</td>
						<td style="width: 2rem;">操作</td>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr v-for="power in powerList">
						<td>
							<el-checkbox v-model="checked"></el-checkbox>
						</td>
						<td>{{power.index}}</td>
						<td>{{power.project_name}}</td>
						<td>{{power.name}}</td>
						<td>{{power.descripe}}</td>
						<td>{{power.operation}}</td>
					</tr>
					
				</tbody>
			</table>
		</div>
		<el-pagination class="page"
	      @size-change="pageSizeChange"
	      @current-change="pageIndexChange"
	      layout="total, sizes, prev, pager, next, jumper"
	      :current-page="param.pageIndex"
	      :total="count">
	    </el-pagination>
	</div>
</template>

<script>
var vm;

export default {
  data: function() {
    return {
    	checked : false,
        typeList : [],
        param : {
        	brandId : "1",
        	typeId: null,
        	keyWord: null,
        	pageSize : 10,
        	pageIndex : 1
        },
        powerList : [
        	{index:1, project_name:"乐学教师端", name:"app-老师", descripe : "教师权限", power:"后台管理"},
        	{index:2, project_name:"乐学教师端", name:"app-老师", descripe : "教师权限", power:"后台管理"},
        	{index:3, project_name:"乐学教师端", name:"app-老师", descripe : "教师权限", power:"后台管理"},
        	{index:4, project_name:"乐学教师端", name:"app-老师", descripe : "教师权限", power:"后台管理"},
        ],
        count : null
    }
  },
  methods : {
  	search : function() {
  		var p = vm.param;
		//重写url的查询部分,记录查询条件
		var query = {
			typeId : (p.typeId? base64.encode(p.typeId) : undefined),
			keyWord : (p.keyWord? p.keyWord : undefined),
		}
		vm.$router.push({path:"/business/school_list",query:query})
  		//查询园所列表
	  	api.schoolList(p).then(function(data){
	  		vm.schoolList = data;
	  	});
  	},
  	openAdd : function() {
		router.push("/business/school_add")
  	},
  	openDetail : function(id) {
  		id = base64.encode(id);
  		router.push("/business/school_detail/"+id);
  	},
  	paramChange : function() {  //查询参数发生改变
  		vm.param.pageIndex = 1;
  		//此时需要重新请求园所数量
	  	api.schoolCount(vm.param).then(function(data){
	  		vm.count = data;
	  	});
	  	vm.search();
  	},
  	pageSizeChange : function(val) { //页条数发生改变
  		vm.param.pageSize = val;
    	vm.search();
  	},
  	pageIndexChange : function(val) { //页码发生改变
    	vm.param.pageIndex = val;
    	vm.search();
  	}
  },
  created : function() {
  	vm = this;
  	var p = vm.param;
  	
  	
  	//从url查询参数中,获取typeId和keyWord,存放在请求参数中
  	var query = vm.$route.query;
  	
  	var typeId = base64.encode(query.typeId);
  	//typeId会是null或者数字字符串,转整型
  	p.typeId = (typeId? parseInt(typeId) : undefined);
  	
  	p.keyWord = query.keyWord;
  	
  	
  },
  mounted : function() {
  	
  }
}
</script>

<style scoped src="@/style/resource_set/list.css"></style>
<style scoped>
	.button {
		width: 2rem;
		margin-left: 0.7rem;
	}
</style>
<style lang="scss">
	#school_list {
		.select input {
			font-size: 0.14rem;
		}
		.el-input-group__append {
			background-color: #3bb2b8;
			border-color: #3bb2b8;
			color: white;
		}
	}
</style>